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Figure 1 The Photoshop application workspace, 
toolbox, and menus. 


Basic Image Editing with Adobe 
Photoshop 

Photoshop Application Overview 

Inside Photoshop you will notice several different 
windows, menu boxes, and bars (Figure 1). 

At the top of the application window is the menu bar 
(Figure 2), which contains basic application functions 
such as Save and Open, Cut, Copy, and Paste, etc. 

The menu bar also contains advanced options for 
manipulating and altering your image, for example 
modifying the saturation or the brightness, and 
applying special effect “filters”. 



Figure 3 The Photoshop menu bar. 



The toolbox (Figure 3), which floats on the left-hand 
side of the screen, contains all the basic tools used in 
Photoshop to edit and modify your image. Clicking 
on any tool icon will select that tool. Most tools have 
multiple functions, which can be accessed by clicking 
and holding on any tool icon. 

Floating on the right-hand side is a series of menu 
boxes and windows which display information about 
your image and allow you to adjust image attributes 
and manipulate your image. 

The grey background area of the application window 
is called the workspace, and will contain our 
image(s). 

Opening Files 

1. To open a file in Photoshop go to the File 
menu in the menu bar and click Open... 


Figure 2 Photoshop’s toolbox. 



2. A file browser window will appear (Figure 
4). Find your image file, select it, and click 
Open. 

3. Your image file will now appear within its 
own window inside the Photoshop 
workspace. 

Size Matters—DPI 

When editing and preparing images for display it is 
important to consider the medium over which our 
images will be transmitted. Are our images for print? 
Will the be used on a web page? Or maybe they are 
for a PowerPoint presentation. Each of these media 
requires that we adjust the size and resolution of our 
image appropriately. 


Figure 4 Select your image file and click Open. 
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We know size refers to the actually height and width 
that our image will be displayed as, but resolution is 
just as important. Resolution refers to the number of 
dots per inch that appear in our images final form. 

For print these really may just be dots. On screen, 
however, these dots are referred to as pixels. 

An image with high resolution (one produced for 
print, for example) will look very smooth and will 
show virtually no pixilation. (Figure 5) 

An image with low resolution (one produced for the 
screen—particularly the web) may look far more 
pixilated (Figure 6). 

For print we want high resolution because our 
printers can handle it, and our pictures will look best. 
For the screen we must rely on lower resolutions 
simply because monitors can only handle so much. 

A typical monitor is set to display somewhere around 
800x600 pixels. This means that a l”xl”, 600dpi 
image would fill up most of the screen! It is 
becoming more and more common that monitors are 
set to display at higher resolution—somewhere 
around 1024x768 pixels, but that still doesn’t come 
close to the capabilities of print. 

For this reason we must design screen graphics at a 
lower resolution: 72dpi is standard for the world 
wide web. And because of screen resolution 
limitations we should measure the dimensions of our 
images using pixels. To be safe, never publish an 
image for the web that is more than 800 pixels wide 
or 600 pixels high. 

Unless the image we are using for screen came from 
the web it is likely that we will have to edit the image 
so that it is an appropriate resolution and size for 
display. To do so we rely on Photoshop’s tools for 
cropping and resizing images. 

Cropping 

Cropping cuts parts of a picture off in order to reduce 
the overall size. Cropping can help you focus on 
certain parts of a picture by eliminating the rest. 

To crop an image in Photoshop, start by having your 
image open. 

1. Select the Crop tool from the toolbox 
(Figure 7). 

2. Within your image window, left-click and 
drag the crop cursor to frame the part of the 
image you want to retain (Figure 8). 



Figure 5 Raeburn’s “Archers” at 600dpi. 



A 


Figure 6 Raeburn’s “Archers” at 72dpi. 



Figure 7 The Crop tool 



Figure 8 Left-click and drag to make a crop 
selection. 
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3. You can fine-tune the size and shape of your 
crop selection by dragging the edges with 
your mouse. 



Figure 9 Your cropped selection retains the original’s 
dpi. 



Figure 10 From the Image menu select Image size... 



4. When you are ready to crop, click the Enter 
or your keyboard or simply double-click the 
selection. 

Your cropped selection will now appear in the image 
window. (Figure 9) 

Resizing 

Resizing in Photoshop allows you to change both the 
physical size in inches or centimeters as well as the 
resolution. 

To resize an image in Photoshop, start by having 
your image open. 

1. From the Image menu select Image size... 
(Figure 10). 

2. In the Image Size menu (Figure 11) you can 
adjust the width or height of your image by 
pixels or in inches or centimeters. 

3. You can also change the resolution of your 
image under Document Size. 

4. Click OK to apply your image size changes. 

Brightness, Contrast, Color 

Sometimes the images that we are working with are 
visually not quite right. This can be very common 
when scanning in images—especially images from 
slides. To remedy this, Photoshop has tools that 
allow you to adjust the brightness, contrast, and color 
of an image. 

Adjusting Brightness or Contrast 

Brightness refers to how much lighting is applied to 
an image. Contrast refers to how much shadowing 
there is in an image. For example, we might say that 
on a rainy cloudy day there is little contrast outside— 
everything is grey. On a bright, cloudless day we 
could say there is a high amount of contrast—our 
shadows are deep black. 


Figure 11 The Image Size menu allows you to 
change the dimensions and the resolution. 


To adjust the brightness or contrast an image in 
Photoshop, start by having your image open. 

1. Go to the Image menu and under 
Adjustments choose Brightness/Contrast 
(Figure 12). 

2. In the Brightness Contrast menu left-click 
and drag the pointers to adjust the brightness 
or contrast of the image (Figure 13). 

Click OK to apply your changes. 


3. 
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Adjusting Hue or Saturation 

Hue refers to what colors appear in your picture. 
Saturation refers to how strong or deep those colors 
are. For example, a black and white photo has zero 
saturation. 

To adjust the hue or saturation of an image in 
Photoshop, start by having your image open. 

1. Go to the Image menu and under 
Adjustments choose Hue/Saturation. 

2. In the Hue Saturation menu left-click and 
drag the pointers to adjust the hue or 
saturation of the image. 

3. Click OK to apply your changes. 

File Formats 

When saving images for the World Wide Web it is 
important to use a file format that web browsers will 
accept. There are three common file formats 
accepted by web browsers: 

^ GIF 

^ JPG 

^ PNG 

For most photorealistic images I recommend using 
JPG, as it will preserve as much quality as you wish 
while compressing the file size. 

GIF is a good choice for icons or line-drawing 
images, especially if you want some part of your 
image to be transparent. 

Be sure to select the appropriate file format when you 
save your image! (Figure 14) 

When saving as a JPG you will be prompted to adjust 
the compression/quality level (Figure 15). A high 
quality image will mean less compression and a 
larger file size. A low quality image implies a 
smaller file size at the cost of clarity. 



Figure 12 In the File menu choose Brightness/Contrast 
under Adjustments. 



Figure 13 Left-click and drag the pointer to adjust. 



Figure 14 From the Format menu select the file type you 
wish to save you image in. 



Figure 15 Adjust the slider to determine quality and file 


size. 






























































